<template>
	<view class="product-detail">
			<view class="product-detail__intro">
				<view class="block-box">
					<view class="product-detail__intro--price-unit">
						<view>
						{{info.name}}
						 
						 </view>
						
						
						
						<view class="flex">
							<image v-if="info.isCollect==1" @click.stop="handleCollect('delete',info,index)"
							src="@/static/home/homelist/sc01.png" mode="widthFix"></image>
							<image v-else @click.stop="handleCollect('create',info,index)"
							src="@/static/home/homelist/sc02.png" mode="widthFix"></image>
							<text class="click">{{info.money}}</text>元/{{info.singlePersonUnit}}
						</view>
					</view>
					<view class="block-box__row">
						<text>单人最低服务时间</text>
						<text>{{info.singlePerson}}{{info.singlePersonUnit}}</text>
					</view>
					<view class="product-detail__intro--server">
						服务介绍
					</view>
					<view>
						<rich-text :nodes="info.service"></rich-text>
 					</view>
					
					<view class="product-detail__intro--order-info">
						下单须知
					</view>
					<view style="color: #999; font-weight: normal;">
						<rich-text :nodes="info.orderingNotice"></rich-text>
 					</view>
				</view>
				
				<view class="product-detail__logo">
					<view class="logo-item" v-for="item in logoList" :key="item.label">
						<image :src="item.icon" mode=""></image>
						<text>{{ item.label }}</text>
					</view>
				</view>
			</view>
			
			<view style="min-height:600rpx;">
				<homeList ref="homeList"  />
				<no-data v-if="list.length==0"/> 
			</view>
			
			
			
			<view class="footer">
				<view class="woodsbtn" @click="toOrder" style="background-color: #277EEF;">
					随机下单
				</view>
			</view>
	</view>
</template>

<script>
	import {mapState,mapActions } from "vuex";
	import homeList from "@/components/home-list.vue"
	import {goodsDetailsAPI,categoryUserListAPI,memberCollectCreateAPI,memberCollectDeleteAPI,categoryDetailsThreeAPI} from "@/api/appointment.js"
	import pageing from "@/mixins/pageing.js"
	export default {
		mixins:[pageing],
		components:{homeList},
		data() {
			return {
				logoList:[
					{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/4487a293ffacdecb89fe1e46dc47cf3300b9bcee59ad960683c9ab778863965a.png', label: '培训上岗' },
					{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/70a8660da0ec9f90b994408dca0f61821761c5e7110e1b92790a8e9118d053c5.png', label: '专业服务' },
					{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/3fd21beb1fe8fa6d0081e272d8206a86b6ae9e000f5deb2c1193bb70cb2d9fbd.png', label: '约定上门' },
					{ icon: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/dc2af911431993e6d4def666b0ce5800a748d21bb4f38f9f1fa4e890063ecd3d.png', label: '售后无忧' },
				],
				categoryId:'',
				info:{},
				list:[]
			}
		},
		computed:{
		    ...mapState("select", ["location","city"])
		},
		onLoad(option) {
			this.categoryId = option.id
			this.getdata()
			this.getlist()
		},
		methods: {
			toOrder(){
				categoryDetailsThreeAPI({categoryId:this.categoryId}).then(res=>{
					this.tourl('/pages/order/order?categoryId='+res.id+'&oneCategoryName='+res.oneCategoryName+'&oneCategoryId='+res.oneCategoryId)
				})
			},
			handleCollect(url,item,index){
				let action=url=="delete"?memberCollectDeleteAPI:memberCollectCreateAPI
				action({
					categoryId:this.categoryId,
					id:this.info.id,
				}).then(res=>{
					console.log(res)
					this.info.isCollect=this.info.isCollect==1?0 :1
				})
			},
			getdata() {
				var data = {
					categoryId: this.categoryId, 
				}
				goodsDetailsAPI(data).then(res => {
					this.info = res
				})
			
			},
			getlist(){
				categoryUserListAPI({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					cityId:this.city.cityId,
					longitude:this.location.longitude,
					latitude:this.location.latitude,
					categoryId:this.categoryId,
					 
				}).then(res=>{
					this.total=res.total
					this.list=this.list.concat(res.list)
					this.$refs.homeList.list=this.list
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-detail{
		min-height: 100vh;
		&__intro{
			background-color:$uni-color-primary;
			padding: 24rpx 20rpx 52rpx;
			color: #666;
			font-weight: 500;
			font-size: 28rpx;
			border-radius: 0rpx  0rpx  20rpx  20rpx;
			padding: 20rpx;
			.block-box{
				 
				background-color: #fff;
				padding: 20rpx;
				border-radius: 20rpx;
			}
			.block-box__row{
				color: #666;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: space-between;
				line-height: 80rpx;
			}
			&--price-unit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				view{
					&:first-child{
						border-radius: 0rpx  32rpx  32rpx  0rpx;
						background: linear-gradient(to right, #277EEF80 0%, #277EEFFF 100%);
						font-size: 32rpx;
						color: #fff;
						padding: 10rpx 46rpx;
						position: relative;
						left: -24rpx;
						
					}
					.click{
						font-size: 40rpx;
						margin-right: 5rpx;
						
					}
					image{
						width: 40rpx;
						height: 40rpx;
						margin: 0 15rpx;
					} 
				}
			}
			&--server{
				margin: 36rpx 0 26rpx;
			}
			&--order-info{
				margin: 40rpx 0 12rpx;
				color: #999;
			}
		}
		&__logo{
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			padding: 0 20rpx;
			.logo-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 64rpx;
					height: 64rpx;
				}
				text{
					font-size: 24rpx;
					color: #fff;
					margin-top: 8rpx;
				}
			}
		}
		
		&__staff-list{
			padding: 22rpx 0rpx;
			staff-card{
				display: block;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
